<template>
  <header class="header" :class="{ 'header-scrolled': isScrolled }">
    <div class="container" style="padding: 0">
      <div class="header-content">
        <div class="logo">
          <router-link to="/">
            <div class="logo-row">
              <img
                v-if="siteLogo"
                :src="siteLogo"
                alt="logo"
                class="header-logo"
              />
              <div
                class="logo-text"
                style="color: #fff"
                v-html="siteName"
              ></div>
              <!-- <h1>{{ siteName }}</h1>
              <span>{{ siteSubtitle }}</span> -->
            </div>
          </router-link>
        </div>

        <nav class="nav">
          <ul class="nav-list">
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'Home' ? 'a-panel' : ''"
            >
              <a
                href="javascript:void(0)"
                class="nav-link"
                @click.prevent="navigateTo('/')"
                >{{ t("nav.home") }}</a
              >
            </li>
            <!-- 关于我们 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'About' ? 'a-panel' : ''"
              @mouseenter="onHoverEnter('about')"
              @mouseleave="onHoverLeave('about')"
            >
              <a href="javascript:void(0)" class="nav-link" @click.prevent>
                <!-- {{ t("nav.about") }} -->
                {{ "关于我们" }}
              </a>
              <div
                class="nav-panel"
                v-show="activePanel === 'about'"
                @mouseenter="onHoverEnter('about')"
                @mouseleave="onHoverLeave('about')"
              >
                <div class="panel-content">
                  <div class="panel-section">
                    <h3>{{ t("about.exhibitionIntro") }}</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibition-intro')"
                    >
                      <el-icon><InfoFilled /></el-icon>
                      <span>{{ t("about.exhibitionIntro") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/product-scope')"
                    >
                      <el-icon><Document /></el-icon>
                      <span>{{ t("about.productScope") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibition-highlights')"
                    >
                      <el-icon><Picture /></el-icon>
                      <span>{{ t("about.exhibitionHighlights") }}</span>
                    </div>
                    <div class="panel-item" @click="navigateTo('/venue-intro')">
                      <el-icon><Location /></el-icon>
                      <span>{{ t("about.venueIntro") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>{{ t("about.organizationStructure") }}</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/organizer-intro')"
                    >
                      <el-icon><Star /></el-icon>
                      <span>{{ t("about.organizerIntro") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/organization-structure')"
                    >
                      <el-icon><Connection /></el-icon>
                      <span>{{ t("about.organizationStructure") }}</span>
                    </div>
                    <div class="panel-item" @click="navigateTo('/downloads')">
                      <el-icon><Download /></el-icon>
                      <span>{{ t("nav.downloads") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/past-exhibitions')"
                    >
                      <el-icon><Trophy /></el-icon>
                      <span>{{ t("about.pastExhibitions") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>联系方式</h3>
                    <div class="contact-brief">
                      <p v-if="contact.company" class="contact-row">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ contact.company }}</span>
                      </p>
                      <p v-if="contact.phone" class="contact-row">
                        <el-icon><Phone /></el-icon>
                        <span>{{ contact.phone }}</span>
                      </p>
                      <p v-if="contact.email" class="contact-row">
                        <el-icon><Message /></el-icon>
                        <span>{{ contact.email }}</span>
                      </p>
                      <p v-if="contact.address" class="contact-row">
                        <el-icon><Location /></el-icon>
                        <span>{{ contact.address }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <!-- 展商中心 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'ExhibitorCenter' ? 'a-panel' : ''"
              @mouseenter="onHoverEnter('exhibitor')"
              @mouseleave="onHoverLeave('exhibitor')"
            >
              <a href="javascript:void(0)" class="nav-link" @click.prevent>
                {{ "展商中心" }}
              </a>
              <div
                class="nav-panel"
                v-show="activePanel === 'exhibitor'"
                @mouseenter="onHoverEnter('exhibitor')"
                @mouseleave="onHoverLeave('exhibitor')"
              >
                <div class="panel-content">
                  <div class="panel-section">
                    <h3>{{ t("exhibitor.whyExhibit") }}</h3>
                    <div class="panel-item" @click="navigateTo('/why-exhibit')">
                      <el-icon><EditPen /></el-icon>
                      <span>{{ t("exhibitor.whyExhibit") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/who-exhibits')"
                    >
                      <el-icon><Shop /></el-icon>
                      <span>{{ t("exhibitor.whoExhibits") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibit-registration')"
                    >
                      <el-icon><Service /></el-icon>
                      <span>{{ t("exhibitor.exhibitRegistration") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>{{ t("exhibitor.exhibitorServices") }}</h3>
                    <!-- <div
                      class="panel-item"
                      @click="navigateTo('/exhibitor-system')"
                    >
                      <el-icon><Document /></el-icon>
                      <span>{{ t("exhibitor.exhibitorSystem") }}</span>
                    </div> -->
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibitor-services')"
                    >
                      <el-icon><Setting /></el-icon>
                      <span>{{ t("exhibitor.exhibitorServices") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibitor-reviews')"
                    >
                      <el-icon><Star /></el-icon>
                      <span>{{ t("exhibitor.exhibitorReviews") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>联系方式</h3>
                    <div class="contact-brief">
                      <p v-if="contact.company" class="contact-row">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ contact.company }}</span>
                      </p>
                      <p v-if="contact.phone" class="contact-row">
                        <el-icon><Phone /></el-icon>
                        <span>{{ contact.phone }}</span>
                      </p>
                      <p v-if="contact.email" class="contact-row">
                        <el-icon><Message /></el-icon>
                        <span>{{ contact.email }}</span>
                      </p>
                      <p v-if="contact.address" class="contact-row">
                        <el-icon><Location /></el-icon>
                        <span>{{ contact.address }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <!-- 观众中心 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'VisitorCenter' ? 'a-panel' : ''"
              @mouseenter="onHoverEnter('visitor')"
              @mouseleave="onHoverLeave('visitor')"
            >
              <a href="javascript:void(0)" class="nav-link" @click.prevent>
                <!-- {{ t("nav.visitorCenter") }} -->
                {{ "观众中心" }}
              </a>
              <div
                class="nav-panel"
                v-show="activePanel === 'visitor'"
                @mouseenter="onHoverEnter('visitor')"
                @mouseleave="onHoverLeave('visitor')"
              >
                <div class="panel-content">
                  <div class="panel-section">
                    <h3>{{ t("visitor.visitorTSubtitle1") }}</h3>
                    <div class="panel-item" @click="navigateTo('/group-visit')">
                      <el-icon><Ticket /></el-icon>
                      <span>{{ t("visitor.groupVisit") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/visitor-preregistration')"
                    >
                      <el-icon><Guide /></el-icon>
                      <span>{{ t("visitor.prereg") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/visitor-notice')"
                    >
                      <el-icon><Location /></el-icon>
                      <span>{{ t("visitor.notice") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/visitor-reviews')"
                    >
                      <el-icon><Star /></el-icon>
                      <span>{{ t("visitor.visitorReviews") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>{{ t("visitor.visitorTSubtitle2") }}</h3>
                    <div class="panel-item" @click="navigateTo('/visa-system')">
                      <el-icon><Document /></el-icon>
                      <span>{{ t("visitor.visaSystem") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/visitor-roster')"
                    >
                      <el-icon><Document /></el-icon>
                      <span>{{ t("visitor.visitorRoster") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>联系方式</h3>
                    <div class="contact-brief">
                      <p v-if="contact.company" class="contact-row">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ contact.company }}</span>
                      </p>
                      <p v-if="contact.phone" class="contact-row">
                        <el-icon><Phone /></el-icon>
                        <span>{{ contact.phone }}</span>
                      </p>
                      <p v-if="contact.email" class="contact-row">
                        <el-icon><Message /></el-icon>
                        <span>{{ contact.email }}</span>
                      </p>
                      <p v-if="contact.address" class="contact-row">
                        <el-icon><Location /></el-icon>
                        <span>{{ contact.address }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 展品商城 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'ExhibitorsDirectory' ? 'a-panel' : ''"
            >
              <a
                href="javascript:void(0)"
                class="nav-link"
                @click.prevent="navigateTo('/exhibitors-directory')"
              >
                <!-- {{ t("nav.productMall") }} -->
                {{ "展品商城" }}
              </a>
            </li>
            <!-- 同期活动 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'Activity' ? 'a-panel' : ''"
              @mouseenter="onHoverEnter('activity')"
              @mouseleave="onHoverLeave('activity')"
            >
              <a href="javascript:void(0)" class="nav-link" @click.prevent>
                <!-- {{ t("nav.activityCenter") }} -->
                {{ "同期活动" }}
              </a>
              <div
                class="nav-panel"
                v-show="activePanel === 'activity'"
                @mouseenter="onHoverEnter('activity')"
                @mouseleave="onHoverLeave('activity')"
              >
                <div class="panel-content">
                  <div class="panel-section">
                    <h3>活动安排</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/activity-calendar')"
                    >
                      <el-icon><Calendar /></el-icon>
                      <span>{{ t("activity.calendar") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/industry-forum')"
                    >
                      <el-icon><Connection /></el-icon>
                      <span>{{ t("activity.forum") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/tech-exchange')"
                    >
                      <el-icon><Microphone /></el-icon>
                      <span>{{ t("activity.techExchange") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>商务活动</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/business-matching')"
                    >
                      <el-icon><Trophy /></el-icon>
                      <span>{{ t("activity.businessMatching") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/product-release')"
                    >
                      <el-icon><Star /></el-icon>
                      <span>{{ t("activity.productRelease") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/activity-overview')"
                    >
                      <el-icon><Share /></el-icon>
                      <span>{{ t("activity.overview") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>联系方式</h3>
                    <div class="contact-brief">
                      <p v-if="contact.company" class="contact-row">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ contact.company }}</span>
                      </p>
                      <p v-if="contact.phone" class="contact-row">
                        <el-icon><Phone /></el-icon>
                        <span>{{ contact.phone }}</span>
                      </p>
                      <p v-if="contact.email" class="contact-row">
                        <el-icon><Message /></el-icon>
                        <span>{{ contact.email }}</span>
                      </p>
                      <p v-if="contact.address" class="contact-row">
                        <el-icon><Location /></el-icon>
                        <span>{{ contact.address }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>

            <!-- 新闻媒体 -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'News' ? 'a-panel' : ''"
              @mouseenter="onHoverEnter('media')"
              @mouseleave="onHoverLeave('media')"
            >
              <a href="javascript:void(0)" class="nav-link" @click.prevent>
                <!-- {{ t("nav.mediaCenter") }} -->
                {{ "新闻媒体" }}
              </a>
              <div
                class="nav-panel"
                v-show="activePanel === 'media'"
                @mouseenter="onHoverEnter('media')"
                @mouseleave="onHoverLeave('media')"
              >
                <div class="panel-content">
                  <div class="panel-section">
                    <h3>{{ t("media.exhibitionNews") }}</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/exhibition-news')"
                    >
                      <el-icon><Document /></el-icon>
                      <span>{{ t("media.exhibitionNews") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/media-reports')"
                    >
                      <el-icon><VideoPlay /></el-icon>
                      <span>{{ t("media.mediaReports") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/industry-news')"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                      <span>{{ t("media.industryNews") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>{{ t("media.onSiteHighlights") }}</h3>
                    <div
                      class="panel-item"
                      @click="navigateTo('/on-site-highlights')"
                    >
                      <el-icon><Microphone /></el-icon>
                      <span>{{ t("media.onSiteHighlights") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/cooperative-media')"
                    >
                      <el-icon><Present /></el-icon>
                      <span>{{ t("media.cooperativeMedia") }}</span>
                    </div>
                    <div
                      class="panel-item"
                      @click="navigateTo('/media-registration')"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                      <span>{{ t("media.mediaRegistration") }}</span>
                    </div>
                  </div>
                  <div class="panel-divider"></div>
                  <div class="panel-section">
                    <h3>联系方式</h3>
                    <div class="contact-brief">
                      <p v-if="contact.company" class="contact-row">
                        <el-icon><InfoFilled /></el-icon>
                        <span>{{ contact.company }}</span>
                      </p>
                      <p v-if="contact.phone" class="contact-row">
                        <el-icon><Phone /></el-icon>
                        <span>{{ contact.phone }}</span>
                      </p>
                      <p v-if="contact.email" class="contact-row">
                        <el-icon><Message /></el-icon>
                        <span>{{ contact.email }}</span>
                      </p>
                      <p v-if="contact.address" class="contact-row">
                        <el-icon><Location /></el-icon>
                        <span>{{ contact.address }}</span>
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </li>
            <!-- <li>
              <router-link to="/downloads" class="nav-link">{{
                t("nav.downloads")
              }}</router-link>
            </li> -->
            <li
              class="nav-item-with-panel"
              :class="checkedNavName === 'Contact' ? 'a-panel' : ''"
            >
              <a
                href="javascript:void(0)"
                class="nav-link"
                @click.prevent="navigateTo('/contact')"
              >
                <!-- {{ t("nav.contact") }} -->
                {{ "联系我们" }}
              </a>
            </li>
            <li>
              <a
                href="javascript:void(0)"
                class="nav-link-cn"
                style="display: flex; align-items: center; gap: 5px"
                @mouseenter="onHoverEnter('language')"
                @mouseleave="onHoverLeave('language')"
              >
                <svg
                  t="1764054580014"
                  class="icon"
                  viewBox="0 0 1536 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="5940"
                  width="20"
                  height="20"
                  v-if="currentLanguage === 'chinese_simplified'"
                >
                  <path d="M0 0h1536v1024H0z" fill="#D8231D" p-id="5941"></path>
                  <path
                    d="M626.74 261.58a165.478 165.478 0 0 1 14.386 14.03l14.285 15.001 36.608-17.664a163.84 163.84 0 0 1-8.96 18.432c-3.072 6.042-6.297 11.981-9.523 18.176l28.877 30.003a25.6 25.6 0 0 1-3.072 0l-34.919-6.553c-3.379-0.615-3.379-0.512-5.12 2.611l-16.179 30.72-1.945 3.226-1.23-8.295c-1.535-10.24-2.918-20.48-4.3-30.72-0.41-2.457-0.41-2.509-2.918-3.02l-35.84-6.554a5.12 5.12 0 0 1-1.844-0.717c5.99-3.38 12.135-6.144 18.176-9.114l18.535-8.908-5.12-40.397z m-124.724-90.93l0.614-0.512 37.325 15.36 26.727-31.642v4.3l-2.304 33.946c0 3.38 0 3.38 2.918 4.608l32.717 13.21c0.768 0 1.382 0.614 2.713 1.178l-3.072 1.075-34.56 8.448c-2.918 0.614-2.918 0.614-3.174 3.686l-2.458 37.018-0.307 1.843-2.099-3.226c-6.144-9.83-12.288-19.712-18.586-29.542-1.69-2.765-1.792-2.765-5.12-1.894l-34.201 8.345-2.919 0.563c9.063-10.905 17.818-21.196 26.727-31.795l-21.043-34.611z m-63.488 144.076l-80.947 59.75-1.997 1.486c-2.304 1.792-2.304 1.792-1.382 4.659l22.118 67.584 10.24 31.437 0.768 2.508h-0.614l-1.792-1.228-86.016-62.976-0.768-0.461h-0.717l-88.371 64.973-0.615-0.461 33.587-105.011-88.473-64.359v-0.768h105.318c4.608 0 3.84 0.563 5.12-3.84l32.256-96.205a9.472 9.472 0 0 1 1.69-3.276l33.536 103.27c6.041 0.307 12.134 0 18.125 0h91.443v0.666z m161.229 253.901l-34.253 8.295-3.226 0.921-2.816 41.677-1.996-2.816-18.74-29.798c-1.792-2.816-1.843-2.816-5.12-2.048l-34.15 8.448-3.072 0.512 26.778-31.847-21.044-34.56 0.41-0.512c6.349 2.15 12.442 5.12 18.688 7.424l18.893 7.68 26.214-31.13h0.512v3.482l-2.304 33.843v1.23a2.56 2.56 0 0 0 1.997 3.174l14.131 5.683 19.661 7.885 2.714 1.126-3.226 1.075z m99.174-122.47L671.898 467.2c-2.663 2.048-2.663 2.048-1.536 5.12l11.673 32.614a6.451 6.451 0 0 1 0.359 3.226l-33.792-23.398-32.461 25.19-0.512-0.41 11.417-39.475-33.484-23.04v-0.768c13.414-0.665 26.88-0.512 40.704-1.28l11.827-38.81h0.512l1.229 3.073 11.52 32.358c1.024 2.918 1.024 2.918 4.096 2.816l34.252-1.024h3.226v0.614z"
                    fill="#FFFA30"
                    p-id="5942"
                  ></path>
                </svg>
                <svg
                  t="1764054610227"
                  class="icon"
                  viewBox="0 0 1588 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="7499"
                  width="20"
                  height="20"
                  v-else
                >
                  <path
                    d="M0 0h1588.476454v1024H0"
                    fill="#FFFFFF"
                    p-id="7500"
                  ></path>
                  <path
                    d="M0 80.558449h1588.476454V0H0M0 157.145706h1588.476454v80.558449H0M0 314.291413h1588.476454v80.558448H0M0 471.437119h1588.476454v80.558449H0M0 629.150139h1588.476454v79.991135H0M0 786.295845h1588.476454v80.558449H0M0 1024h1588.476454v-80.558449H0"
                    fill="#E50012"
                    p-id="7501"
                  ></path>
                  <path
                    d="M0 551.995568h688.150693V0H0"
                    fill="#1E2380"
                    p-id="7502"
                  ></path>
                  <path
                    d="M56.731302 66.375623l17.019391 13.0482-6.240444-20.990582 17.019391-12.480886h-21.557895L56.731302 25.529086 49.923546 45.952355H28.365651l17.586704 12.480886-6.807757 20.990582 17.586704-13.0482zM171.328532 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L171.328532 25.529086l-6.240443 20.423269h-21.557895l17.01939 12.480886-6.240443 20.990582 17.019391-13.0482zM286.493075 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L286.493075 25.529086l-6.807756 20.423269h-21.557895l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM401.657618 66.375623l17.01939 13.0482-6.240443-20.990582 17.019391-12.480886h-21.557895L401.657618 25.529086l-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM516.254848 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L516.254848 25.529086l-6.807757 20.423269h-20.990581l17.01939 12.480886-6.240443 20.990582 17.019391-13.0482zM631.419391 66.375623l17.586703 13.0482-6.807756-20.990582 17.019391-12.480886h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM114.029917 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586704 12.480887-6.807757 20.423269 17.586704-12.480887zM229.19446 121.972299l17.01939 12.480887-6.240443-20.423269 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM343.79169 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423269 17.019391-12.480887zM458.956233 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM574.120776 121.972299l17.01939 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM56.731302 177.568975l17.019391 12.480886-6.240444-20.423268 17.019391-12.480887h-21.557895L56.731302 136.722438l-6.807756 20.423268H28.365651l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM171.328532 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM286.493075 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM401.657618 177.568975l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM516.254848 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-20.990581l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM631.419391 177.568975l17.586703 12.480886-6.807756-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM114.029917 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM229.19446 233.165651l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM343.79169 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM458.956233 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM574.120776 233.165651l17.01939 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM56.731302 288.762327l17.019391 12.480886-6.240444-20.423268 17.019391-12.480887h-21.557895L56.731302 247.915789l-6.807756 20.423269H28.365651l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM171.328532 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM286.493075 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM401.657618 288.762327l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM516.254848 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.807757 20.423269h-20.990581l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM631.419391 288.762327l17.586703 12.480886-6.807756-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM114.029917 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586704 12.480886-6.807757 20.423269 17.586704-12.480886zM229.19446 344.359003l17.01939 12.480886-6.240443-20.423269 17.019391-12.480886h-20.990582l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM343.79169 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 12.480886-6.240443 20.423269 17.019391-12.480886zM458.956233 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM574.120776 344.359003l17.01939 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM56.731302 399.955679l17.019391 12.480886-6.240444-20.423269 17.019391-13.048199h-21.557895L56.731302 359.109141l-6.807756 19.855956H28.365651l17.586704 13.048199-6.807757 20.423269 17.586704-12.480886zM171.328532 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.240443 19.855956h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM286.493075 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.807756 19.855956h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM401.657618 399.955679l17.01939 12.480886-6.240443-20.423269 17.019391-13.048199h-21.557895l-6.240443-19.855956-6.807757 19.855956h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM516.254848 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.807757 19.855956h-20.990581l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM631.419391 399.955679l17.586703 12.480886-6.807756-20.423269 17.019391-13.048199h-20.990582l-6.807756-19.855956-6.807757 19.855956h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM114.029917 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586704 13.048199-6.807757 20.423269 17.586704-12.480886zM229.19446 455.552355l17.01939 12.480886-6.240443-20.423269 17.019391-13.048199h-20.990582l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM343.79169 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM458.956233 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM574.120776 455.552355l17.01939 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM56.731302 510.581717l17.019391 13.0482-6.240444-20.423269 17.019391-13.048199h-21.557895L56.731302 469.73518l-6.807756 20.423269H28.365651l17.586704 13.048199-6.807757 20.423269L56.731302 510.581717zM171.328532 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-13.0482zM286.493075 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482zM401.657618 510.581717l17.01939 13.0482-6.240443-20.423269 17.019391-13.048199h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482zM516.254848 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807757 20.423269h-20.990581l17.01939 13.048199-6.240443 20.423269 17.019391-13.0482zM631.419391 510.581717l17.586703 13.0482-6.807756-20.423269 17.019391-13.048199h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482z"
                    fill="#FFFFFF"
                    p-id="7503"
                  ></path>
                </svg>
                {{
                  currentLanguage === "chinese_simplified" ? "中文" : "English"
                }}
                <div
                  class="nav-panel"
                  v-show="activePanel === 'language'"
                  @mouseenter="onHoverEnter('language')"
                  @mouseleave="onHoverLeave('language')"
                  style="min-width: 180px"
                >
                  <div class="panel-content">
                    <div class="panel-section">
                      <div
                        class="panel-item"
                        @click="changeLanguage('chinese_simplified')"
                      >
                        <svg
                          t="1764054580014"
                          class="icon"
                          viewBox="0 0 1536 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="5940"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M0 0h1536v1024H0z"
                            fill="#D8231D"
                            p-id="5941"
                          ></path>
                          <path
                            d="M626.74 261.58a165.478 165.478 0 0 1 14.386 14.03l14.285 15.001 36.608-17.664a163.84 163.84 0 0 1-8.96 18.432c-3.072 6.042-6.297 11.981-9.523 18.176l28.877 30.003a25.6 25.6 0 0 1-3.072 0l-34.919-6.553c-3.379-0.615-3.379-0.512-5.12 2.611l-16.179 30.72-1.945 3.226-1.23-8.295c-1.535-10.24-2.918-20.48-4.3-30.72-0.41-2.457-0.41-2.509-2.918-3.02l-35.84-6.554a5.12 5.12 0 0 1-1.844-0.717c5.99-3.38 12.135-6.144 18.176-9.114l18.535-8.908-5.12-40.397z m-124.724-90.93l0.614-0.512 37.325 15.36 26.727-31.642v4.3l-2.304 33.946c0 3.38 0 3.38 2.918 4.608l32.717 13.21c0.768 0 1.382 0.614 2.713 1.178l-3.072 1.075-34.56 8.448c-2.918 0.614-2.918 0.614-3.174 3.686l-2.458 37.018-0.307 1.843-2.099-3.226c-6.144-9.83-12.288-19.712-18.586-29.542-1.69-2.765-1.792-2.765-5.12-1.894l-34.201 8.345-2.919 0.563c9.063-10.905 17.818-21.196 26.727-31.795l-21.043-34.611z m-63.488 144.076l-80.947 59.75-1.997 1.486c-2.304 1.792-2.304 1.792-1.382 4.659l22.118 67.584 10.24 31.437 0.768 2.508h-0.614l-1.792-1.228-86.016-62.976-0.768-0.461h-0.717l-88.371 64.973-0.615-0.461 33.587-105.011-88.473-64.359v-0.768h105.318c4.608 0 3.84 0.563 5.12-3.84l32.256-96.205a9.472 9.472 0 0 1 1.69-3.276l33.536 103.27c6.041 0.307 12.134 0 18.125 0h91.443v0.666z m161.229 253.901l-34.253 8.295-3.226 0.921-2.816 41.677-1.996-2.816-18.74-29.798c-1.792-2.816-1.843-2.816-5.12-2.048l-34.15 8.448-3.072 0.512 26.778-31.847-21.044-34.56 0.41-0.512c6.349 2.15 12.442 5.12 18.688 7.424l18.893 7.68 26.214-31.13h0.512v3.482l-2.304 33.843v1.23a2.56 2.56 0 0 0 1.997 3.174l14.131 5.683 19.661 7.885 2.714 1.126-3.226 1.075z m99.174-122.47L671.898 467.2c-2.663 2.048-2.663 2.048-1.536 5.12l11.673 32.614a6.451 6.451 0 0 1 0.359 3.226l-33.792-23.398-32.461 25.19-0.512-0.41 11.417-39.475-33.484-23.04v-0.768c13.414-0.665 26.88-0.512 40.704-1.28l11.827-38.81h0.512l1.229 3.073 11.52 32.358c1.024 2.918 1.024 2.918 4.096 2.816l34.252-1.024h3.226v0.614z"
                            fill="#FFFA30"
                            p-id="5942"
                          ></path>
                        </svg>
                        <span>中文</span>
                      </div>
                      <div
                        class="panel-item"
                        @click="changeLanguage('english')"
                      >
                        <svg
                          t="1764054610227"
                          class="icon"
                          viewBox="0 0 1588 1024"
                          version="1.1"
                          xmlns="http://www.w3.org/2000/svg"
                          p-id="7499"
                          width="20"
                          height="20"
                        >
                          <path
                            d="M0 0h1588.476454v1024H0"
                            fill="#FFFFFF"
                            p-id="7500"
                          ></path>
                          <path
                            d="M0 80.558449h1588.476454V0H0M0 157.145706h1588.476454v80.558449H0M0 314.291413h1588.476454v80.558448H0M0 471.437119h1588.476454v80.558449H0M0 629.150139h1588.476454v79.991135H0M0 786.295845h1588.476454v80.558449H0M0 1024h1588.476454v-80.558449H0"
                            fill="#E50012"
                            p-id="7501"
                          ></path>
                          <path
                            d="M0 551.995568h688.150693V0H0"
                            fill="#1E2380"
                            p-id="7502"
                          ></path>
                          <path
                            d="M56.731302 66.375623l17.019391 13.0482-6.240444-20.990582 17.019391-12.480886h-21.557895L56.731302 25.529086 49.923546 45.952355H28.365651l17.586704 12.480886-6.807757 20.990582 17.586704-13.0482zM171.328532 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L171.328532 25.529086l-6.240443 20.423269h-21.557895l17.01939 12.480886-6.240443 20.990582 17.019391-13.0482zM286.493075 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L286.493075 25.529086l-6.807756 20.423269h-21.557895l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM401.657618 66.375623l17.01939 13.0482-6.240443-20.990582 17.019391-12.480886h-21.557895L401.657618 25.529086l-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM516.254848 66.375623l17.586703 13.0482-6.807756-20.990582 17.586704-12.480886h-21.557895L516.254848 25.529086l-6.807757 20.423269h-20.990581l17.01939 12.480886-6.240443 20.990582 17.019391-13.0482zM631.419391 66.375623l17.586703 13.0482-6.807756-20.990582 17.019391-12.480886h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.990582 17.586704-13.0482zM114.029917 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586704 12.480887-6.807757 20.423269 17.586704-12.480887zM229.19446 121.972299l17.01939 12.480887-6.240443-20.423269 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM343.79169 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423269 17.019391-12.480887zM458.956233 121.972299l17.586703 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM574.120776 121.972299l17.01939 12.480887-6.807756-20.423269 17.586704-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423269 17.586704-12.480887zM56.731302 177.568975l17.019391 12.480886-6.240444-20.423268 17.019391-12.480887h-21.557895L56.731302 136.722438l-6.807756 20.423268H28.365651l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM171.328532 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM286.493075 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM401.657618 177.568975l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM516.254848 177.568975l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-20.990581l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM631.419391 177.568975l17.586703 12.480886-6.807756-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM114.029917 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM229.19446 233.165651l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423268-6.807756 20.423268h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM343.79169 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.240443 20.423268h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM458.956233 233.165651l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM574.120776 233.165651l17.01939 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.240443-20.423268-6.807757 20.423268h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM56.731302 288.762327l17.019391 12.480886-6.240444-20.423268 17.019391-12.480887h-21.557895L56.731302 247.915789l-6.807756 20.423269H28.365651l17.586704 12.480887-6.807757 20.423268 17.586704-12.480886zM171.328532 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM286.493075 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM401.657618 288.762327l17.01939 12.480886-6.240443-20.423268 17.019391-12.480887h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM516.254848 288.762327l17.586703 12.480886-6.807756-20.423268 17.586704-12.480887h-21.557895l-6.807756-20.423269-6.807757 20.423269h-20.990581l17.01939 12.480887-6.240443 20.423268 17.019391-12.480886zM631.419391 288.762327l17.586703 12.480886-6.807756-20.423268 17.019391-12.480887h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480887-6.807756 20.423268 17.586704-12.480886zM114.029917 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586704 12.480886-6.807757 20.423269 17.586704-12.480886zM229.19446 344.359003l17.01939 12.480886-6.240443-20.423269 17.019391-12.480886h-20.990582l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM343.79169 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 12.480886-6.240443 20.423269 17.019391-12.480886zM458.956233 344.359003l17.586703 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM574.120776 344.359003l17.01939 12.480886-6.807756-20.423269 17.586704-12.480886h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 12.480886-6.807756 20.423269 17.586704-12.480886zM56.731302 399.955679l17.019391 12.480886-6.240444-20.423269 17.019391-13.048199h-21.557895L56.731302 359.109141l-6.807756 19.855956H28.365651l17.586704 13.048199-6.807757 20.423269 17.586704-12.480886zM171.328532 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.240443 19.855956h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM286.493075 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.807756 19.855956h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM401.657618 399.955679l17.01939 12.480886-6.240443-20.423269 17.019391-13.048199h-21.557895l-6.240443-19.855956-6.807757 19.855956h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM516.254848 399.955679l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-19.855956-6.807757 19.855956h-20.990581l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM631.419391 399.955679l17.586703 12.480886-6.807756-20.423269 17.019391-13.048199h-20.990582l-6.807756-19.855956-6.807757 19.855956h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM114.029917 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586704 13.048199-6.807757 20.423269 17.586704-12.480886zM229.19446 455.552355l17.01939 12.480886-6.240443-20.423269 17.019391-13.048199h-20.990582l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM343.79169 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-12.480886zM458.956233 455.552355l17.586703 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM574.120776 455.552355l17.01939 12.480886-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-12.480886zM56.731302 510.581717l17.019391 13.0482-6.240444-20.423269 17.019391-13.048199h-21.557895L56.731302 469.73518l-6.807756 20.423269H28.365651l17.586704 13.048199-6.807757 20.423269L56.731302 510.581717zM171.328532 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.240443 20.423269h-21.557895l17.01939 13.048199-6.240443 20.423269 17.019391-13.0482zM286.493075 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807756 20.423269h-21.557895l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482zM401.657618 510.581717l17.01939 13.0482-6.240443-20.423269 17.019391-13.048199h-21.557895l-6.240443-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482zM516.254848 510.581717l17.586703 13.0482-6.807756-20.423269 17.586704-13.048199h-21.557895l-6.807756-20.423269-6.807757 20.423269h-20.990581l17.01939 13.048199-6.240443 20.423269 17.019391-13.0482zM631.419391 510.581717l17.586703 13.0482-6.807756-20.423269 17.019391-13.048199h-20.990582l-6.807756-20.423269-6.807757 20.423269h-21.557894l17.586703 13.048199-6.807756 20.423269 17.586704-13.0482z"
                            fill="#FFFFFF"
                            p-id="7503"
                          ></path>
                        </svg>
                        <span>English</span>
                      </div>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <!-- <el-button @click="translateDeepL">翻译</el-button> -->
          </ul>
        </nav>
        <div class="header-actions">
          <div class="mobile-menu-btn" @click="toggleMobileMenu">
            <el-icon><Menu /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <div class="header-bg-box">
      <div class="header-bg"></div>
    </div>
  </header>
  <!-- 移动端菜单弹窗 -->
  <el-drawer v-model="isMobileMenuOpen" :with-header="false" size="90%">
    <el-menu
      :default-active="currentPagePath"
      unique-opened
      router
      @select="isMobileMenuOpen = false"
    >
      <el-menu-item index="/">{{ t("nav.home") }}</el-menu-item>
      <!-- 关于我们 -->
      <el-sub-menu index="about">
        <template #title>
          <span>
            {{
              currentLanguage === "chinese_simplified" ? "关于我们" : "About"
            }}
          </span>
        </template>
        <el-sub-menu index="exhibition-intro">
          <template #title>
            <span> {{ t("about.exhibitionIntro") }} </span>
          </template>
          <el-menu-item index="/exhibition-intro">{{
            t("about.exhibitionIntro")
          }}</el-menu-item>
          <el-menu-item index="/product-scope">{{
            t("about.productScope")
          }}</el-menu-item>
          <el-menu-item index="/exhibition-highlights">{{
            t("about.exhibitionHighlights")
          }}</el-menu-item>
          <el-menu-item index="/venue-intro">{{
            t("about.venueIntro")
          }}</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="organizer-intro">
          <template #title>
            <span> {{ t("about.organizationStructure") }} </span>
          </template>
          <el-menu-item index="/organizer-intro">{{
            t("about.organizerIntro")
          }}</el-menu-item>
          <el-menu-item index="/organization-structure">{{
            t("about.organizationStructure")
          }}</el-menu-item>
          <el-menu-item index="/downloads">{{
            t("nav.downloads")
          }}</el-menu-item>
          <el-menu-item index="/past-exhibitions">{{
            t("about.pastExhibitions")
          }}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 展商中心 -->
      <el-sub-menu index="exhibitor">
        <template #title>
          <span> {{ t("nav.exhibitorCenter") }} </span>
        </template>
        <el-sub-menu index="why-exhibit">
          <template #title>
            <span> {{ t("exhibitor.whyExhibit") }} </span>
          </template>
          <el-menu-item index="/why-exhibit">{{
            t("exhibitor.whyExhibit")
          }}</el-menu-item>
          <el-menu-item index="/who-exhibits">{{
            t("exhibitor.whoExhibits")
          }}</el-menu-item>
          <el-menu-item index="/exhibit-registration">{{
            t("exhibitor.exhibitRegistration")
          }}</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="exhibitor-services">
          <template #title>
            <span> {{ t("exhibitor.exhibitorServices") }} </span>
          </template>
          <!-- <el-menu-item index="/exhibitor-system">{{
            t("exhibitor.exhibitorSystem")
          }}</el-menu-item> -->
          <el-menu-item index="/exhibitor-services">{{
            t("exhibitor.exhibitorServices")
          }}</el-menu-item>
          <el-menu-item index="/exhibitor-reviews">{{
            t("exhibitor.exhibitorReviews")
          }}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 观众中心 -->
      <el-sub-menu index="visitor-center">
        <template #title>
          <span>
            {{ "观众中心" }}
          </span>
        </template>
        <el-sub-menu index="group-visitors">
          <template #title>
            <span> {{ t("visitor.visitorTSubtitle1") }} </span>
          </template>
          <el-menu-item index="/group-visit">{{
            t("visitor.groupVisit")
          }}</el-menu-item>
          <el-menu-item index="/visitor-preregistration">{{
            t("visitor.prereg")
          }}</el-menu-item>
          <el-menu-item index="/visitor-notice">{{
            t("visitor.notice")
          }}</el-menu-item>
          <el-menu-item index="/visitor-reviews">{{
            t("visitor.visitorReviews")
          }}</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="visa-system">
          <template #title>
            <span> {{ t("visitor.visitorTSubtitle2") }} </span>
          </template>
          <el-menu-item index="/visa-system">{{
            t("visitor.visaSystem")
          }}</el-menu-item>
          <el-menu-item index="/visitor-roster">{{
            t("visitor.visitorRoster")
          }}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 展品商城 -->
      <el-menu-item index="/exhibitors-directory">
        {{ t("nav.productMall") }}
      </el-menu-item>
      <!-- 同期活动 -->
      <el-sub-menu index="activity">
        <template #title>
          <span> {{ t("nav.activityCenter") }} </span>
        </template>
        <el-sub-menu index="hd-ap">
          <template #title>
            <span> 活动安排 </span>
          </template>
          <el-menu-item index="/activity-calendar">{{
            t("activity.calendar")
          }}</el-menu-item>
          <el-menu-item index="/industry-forum">{{
            t("activity.forum")
          }}</el-menu-item>
          <el-menu-item index="/tech-exchange">{{
            t("activity.techExchange")
          }}</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="sw-hd">
          <template #title>
            <span> 商务活动 </span>
          </template>
          <el-menu-item index="/business-matching">{{
            t("activity.businessMatching")
          }}</el-menu-item>
          <el-menu-item index="/product-release">{{
            t("activity.productRelease")
          }}</el-menu-item>
          <el-menu-item index="/activity-overview">{{
            t("activity.overview")
          }}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <!-- 新闻媒体 -->
      <el-sub-menu index="news-media">
        <template #title>
          <span> {{ t("nav.mediaCenter") }} </span>
        </template>
        <el-sub-menu index="exhibition-news">
          <template #title>
            <span> {{ t("media.exhibitionNews") }} </span>
          </template>
          <el-menu-item index="/exhibition-news">{{
            t("media.exhibitionNews")
          }}</el-menu-item>
          <el-menu-item index="/media-reports">{{
            t("media.mediaReports")
          }}</el-menu-item>
          <el-menu-item index="/industry-news">{{
            t("media.industryNews")
          }}</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="sw-hd">
          <template #title>
            <span> {{ t("media.onSiteHighlights") }} </span>
          </template>
          <el-menu-item index="/on-site-highlights">{{
            t("media.onSiteHighlights")
          }}</el-menu-item>
          <el-menu-item index="/cooperative-media">{{
            t("media.cooperativeMedia")
          }}</el-menu-item>
          <el-menu-item index="/media-registration">{{
            t("media.mediaRegistration")
          }}</el-menu-item>
        </el-sub-menu>
      </el-sub-menu>
      <el-menu-item index="/contact">{{ t("nav.contact") }}</el-menu-item>
    </el-menu>
  </el-drawer>
</template>

<script>
import { ref, computed, onMounted, onUnmounted, onBeforeMount } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox, translate } from "element-plus";
import { useI18n } from "vue-i18n";
import {
  Menu,
  User,
  Setting,
  SwitchButton,
  ArrowDown,
  InfoFilled,
  Shop,
  Grid,
  Picture,
  Star,
  Download,
  Phone,
  Document,
  Calendar,
  Service,
  EditPen,
  Ticket,
  Guide,
  Location,
  VideoPlay,
  Trophy,
  Connection,
  ChatDotRound,
  Microphone,
  Share,
  DocumentCopy,
  Present,
  Van,
  Message,
  Clock,
} from "@element-plus/icons-vue";
import { isLoggedIn, getUserInfo, hasPermission, logout } from "../utils/auth";
import request from "@/utils/request";
import { deepLLP } from "@/utils";

export default {
  name: "Header",
  components: {
    Menu,
    User,
    Setting,
    SwitchButton,
    ArrowDown,
    InfoFilled,
    Shop,
    Grid,
    Picture,
    Star,
    Download,
    Phone,
    Document,
    Calendar,
    Service,
    EditPen,
    Ticket,
    Guide,
    Location,
    VideoPlay,
    Trophy,
    Connection,
    ChatDotRound,
    Microphone,
    Share,
    DocumentCopy,
    Present,
    Van,
    Message,
    Clock,
  },
  watch: {
    $route(to, from) {
      if (
        to.name === "Home" ||
        to.name === "Contact" ||
        to.name === "ExhibitorsDirectory"
      ) {
        this.checkedNavName = to.name;
      } else if (
        to.name === "ExhibitionIntro" ||
        to.name === "ProductScope" ||
        to.name === "ExhibitionHighlights" ||
        to.name === "VenueIntro" ||
        to.name === "OrganizerIntro" ||
        to.name === "OrganizationStructure" ||
        to.name === "Downloads" ||
        to.name === "PastExhibitions"
      ) {
        this.checkedNavName = "About";
      } else if (
        to.name === "WhyExhibit" ||
        to.name === "WhoExhibits" ||
        to.name === "ExhibitRegistration" ||
        to.name === "ExhibitorSystem" ||
        to.name === "ExhibitorServices" ||
        to.name === "ExhibitorReviews"
      ) {
        this.checkedNavName = "ExhibitorCenter";
      } else if (
        to.name === "GroupVisit" ||
        to.name === "Visitors" ||
        to.name === "VisitorPreregistration" ||
        to.name === "VisitorNotice" ||
        to.name === "VisaSystem" ||
        to.name === "VisitorRoster" ||
        to.name === "VisitorReviews"
      ) {
        this.checkedNavName = "VisitorCenter";
      } else if (
        to.name === "ActivityCalendar" ||
        to.name === "IndustryForum" ||
        to.name === "TechExchange" ||
        to.name === "BusinessMatching" ||
        to.name === "ProductRelease" ||
        to.name === "ActivityOverview"
      ) {
        this.checkedNavName = "Activity";
      } else if (
        to.name === "ExhibitionNews" ||
        to.name === "MediaReports" ||
        to.name === "IndustryNews" ||
        to.name === "OnSiteHighlights" ||
        to.name === "CooperativeMedia" ||
        to.name === "MediaRegistration"
      ) {
        this.checkedNavName = "News";
      } else {
        this.checkedNavName = to.name;
      }
    },
    isMobileMenuOpen: (newVal) => {
      if (newVal) {
        document.body.style.overflow = "hidden";
      } else {
        document.body.style.overflow = "auto";
      }
    },
  },
  computed: {
    currentPagePath() {
      const route = useRoute();
      return route?.path;
    },
  },
  setup() {
    const checkedNavName = ref("");
    const { t, locale } = useI18n();
    const router = useRouter();
    const isScrolled = ref(false);
    const isMobileMenuOpen = ref(false);
    const activePanel = ref(null);
    const hideTimer = ref(null);
    const hoverCounts = ref({});
    const localeRef = ref(locale.value);

    const siteLogo = ref("");
    const siteName = ref("");
    const siteSubtitle = ref("");

    const currentLanguage = ref("chinese_simplified");

    const contact = ref({ company: "", phone: "", email: "", address: "" });

    const loadSiteInfo = async () => {
      try {
        const info = await request.get("/site/info");
        if (info && (info.code === "200" || info.code === 200)) {
          siteLogo.value = info.data?.siteLogo || "";
          siteName.value = info.data?.siteName || "";
          siteSubtitle.value = info.data?.siteSubtitle || "";
          contact.value = {
            company: info.data?.company || "",
            phone: info.data?.phone || "",
            email: info.data?.email || "",
            address: info.data?.address || "",
          };
        }
      } catch (e) {
        // 忽略加载失败
      }
    };

    // 计算属性
    const userInfo = computed(() => getUserInfo());
    const hasAdminPermission = computed(() => hasPermission("admin"));

    const handleScroll = () => {
      isScrolled.value = window.scrollY > 50;
    };

    const toggleMobileMenu = () => {
      isMobileMenuOpen.value = !isMobileMenuOpen.value;
    };
    const switchLang = (val) => {
      locale.value = val;
      localStorage.setItem("lang", val);
    };

    const onHoverEnter = (panelName) => {
      if (hideTimer.value) {
        clearTimeout(hideTimer.value);
        hideTimer.value = null;
      }
      // 切换到新面板时重置其它计数
      Object.keys(hoverCounts.value).forEach((k) => {
        if (k !== panelName) hoverCounts.value[k] = 0;
      });
      activePanel.value = panelName;
      hoverCounts.value[panelName] = (hoverCounts.value[panelName] || 0) + 1;
    };

    const onHoverLeave = (panelName) => {
      hoverCounts.value[panelName] = Math.max(
        0,
        (hoverCounts.value[panelName] || 0) - 1
      );
      hideTimer.value = setTimeout(() => {
        if (
          (hoverCounts.value[panelName] || 0) === 0 &&
          activePanel.value === panelName
        ) {
          activePanel.value = null;
        }
      }, 120);
    };

    const navigateTo = (path) => {
      router.push(path);
      activePanel.value = null;
    };

    onMounted(() => {
      window.addEventListener("scroll", handleScroll);
      loadSiteInfo();
    });

    onUnmounted(() => {
      window.removeEventListener("scroll", handleScroll);
    });
    const changeLanguage = (val) => {
      activePanel.value = null;
      currentLanguage.value = val;
      localStorage.setItem("user_lang", val);
      window.translate.changeLanguage(currentLanguage.value);
      window.translate.selectLanguageTag.languages = currentLanguage.value;
    };
    onBeforeMount(() => {
      const lang = localStorage.getItem("user_lang");
      if (lang === "english") {
        currentLanguage.value = "english";
        window.translate.changeLanguage("english");
        window.translate.selectLanguageTag.languages = "english";
      }
    });

    const translateDeepL = () => {
      // deepL("<p>hello</p>").then((res) => {
      //   console.log(res);
      // });
      deepLLP(document.body.innerHTML, "EN").then((res) => {
        // console.log(res.text);
        document.body.innerHTML = res.text;
      });
    };
    return {
      t,
      localeRef,
      isScrolled,
      isMobileMenuOpen,
      activePanel,
      onHoverEnter,
      onHoverLeave,
      toggleMobileMenu,
      switchLang,
      navigateTo,
      userInfo,
      hasAdminPermission,
      contact,
      siteLogo,
      siteName,
      siteSubtitle,
      checkedNavName,
      changeLanguage,
      currentLanguage,
      translateDeepL,
    };
  },
};
</script>

<style scoped>
.header {
  position: sticky;
  top: 0;
  left: 0;
  /* right: 0; */
  width: 100%;
  /* background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px); */
  z-index: 1000;
  /* transition: all 0.3s ease; */
  /* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
  /* overflow: hidden; */
}
.header-bg-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  /* background: rgba(255, 255, 255, 0.95); */
  background: linear-gradient(
    199deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 100%
  );
}

.header-scrolled {
  background: rgba(255, 255, 255, 0.98);
  /* background: linear-gradient(
    189deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 82%
  ); */
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 15px 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-globe {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: transparent;
  /* 去除原有红色边框 */
  border: none;
  margin-right: 2px;
}
.globe-header.globe-container {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
  perspective: 600px;
}
.globe-header .globe {
  width: 40px;
  height: 40px;
}
.globe-header .globe-sphere {
  width: 32px;
  height: 32px;
}
.globe-header .orbit.orbit-1 {
  width: 38px;
  height: 38px;
}
.globe-header .orbit.orbit-2 {
  width: 44px;
  height: 44px;
}
.globe-header .orbit.orbit-3 {
  width: 48px;
  height: 48px;
}
.globe-header .satellite {
  width: 3px;
  height: 3px;
}
.globe-header .data-point {
  width: 2px;
  height: 2px;
}
.globe-header::before {
  display: none;
}

.logo a {
  text-decoration: none;
  color: #2c3e50;
}

.logo h1 {
  font-size: 24px;
  font-weight: bold;
  margin: 0;
  color: #fff;
  /* background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 82%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent; */
}

.logo span {
  font-size: 12px;
  color: var(--e-global-color-text);
  display: block;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 15px;
}

.nav-item-with-panel {
  position: relative;
  padding: 5px;
  border-radius: 6px;
  margin: -5px 0;
}
/* .a-panel {
  background-color: #667eea;
} */
.a-panel > .nav-link {
  color: #fff !important;
}

.nav-link,
.nav-link-cn {
  text-decoration: none;
  color: var(--e-global-color-text);
  font-weight: bold;
  transition: color 0.3s ease;
  position: relative;
}

.nav-link:hover,
.nav-link-cn:hover {
  color: #fff;
}

/* .nav-link::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 82%
  );
  transition: width 0.3s ease;
} */

.nav-link:hover::after {
  width: 100%;
}

/* 明确覆盖router-link-active的默认样式 */
.nav-link.router-link-active {
  color: var(--e-global-color-text) !important;
}

.nav-link.router-link-active::after {
  width: 0 !important;
}

/* 确保所有导航链接在默认状态下都是灰色，没有横线 */
.nav-link,
.nav-link.router-link-active,
.nav-link.router-link-exact-active {
  color: var(--e-global-color-text) !important;
}

.nav-link::after,
.nav-link.router-link-active::after,
.nav-link.router-link-exact-active::after {
  width: 0 !important;
}

/* 只有悬停时才显示紫色和横线 */
.nav-link:hover,
.nav-link:hover.router-link-active,
.nav-link:hover.router-link-exact-active {
  color: #fff !important;
}

.nav-link:hover::after,
.nav-link:hover.router-link-active::after,
.nav-link:hover.router-link-exact-active::after {
  width: 100% !important;
}

.nav-panel::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid var(--e-global-color-5c1ca3d);
}

/* 添加透明的连接区域，防止鼠标移动时面板消失 */
.nav-panel::after {
  content: "";
  position: absolute;
  top: -20px;
  left: -10px;
  right: -10px;
  height: 20px;
  background: transparent;
}

/* 为面板本身添加更大的悬停区域 */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  /* background: linear-gradient(135deg, #320063 0%, #4a0a8a 100%); */
  background: linear-gradient(
    135deg,
    var(--e-global-color-a3699a4) 0%,
    var(--e-global-color-5c1ca3d) 82%
  );
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(50, 0, 99, 0.3);
  padding: 24px;
  min-width: 800px;
  z-index: 1001;
  margin-top: 10px;
  animation: panelFadeIn 0.3s ease;
  /* 增加内边距，扩大可点击区域 */
  padding-top: 29px;
  padding-bottom: 29px;
}

.panel-content {
  display: flex;
  gap: 30px;
}

.panel-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.panel-divider {
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  margin: 0 10px;
}

.panel-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 8px;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 500;
  min-width: 140px;
}

@media (max-width: 768px) {
  .panel-item {
    padding: 14px 16px;
    font-size: 14px;
    min-width: auto;
  }
}

.panel-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateX(4px);
}

.panel-item:active {
  background: rgba(255, 255, 255, 0.2);
  transform: translateX(4px) scale(0.98);
}

.panel-item .el-icon {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.8);
}

.panel-item span {
  flex: 1;
}

.panel-section h3 {
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.3);
  position: relative;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.panel-section h3::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.5) 100%);
  border-radius: 1px;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* 添加面板显示/隐藏的过渡效果 */
.nav-panel {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.nav-panel[v-show="false"] {
  opacity: 0;
  transform: translateX(-50%) translateY(-10px);
  pointer-events: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.user-info:hover {
  background-color: rgba(102, 126, 234, 0.1);
}

.username {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.mobile-menu-btn {
  display: none;
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

/* 3D地球样式 */
.globe-container {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  perspective: 600px;
}
.globe {
  position: relative;
  width: 40px;
  height: 40px;
  transform-style: preserve-3d;
  animation: globe-rotate 20s linear infinite;
}
.globe-sphere {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 28%,
    #fff 0%,
    #4a90e2 40%,
    #357abd 70%,
    #2c5aa0 100%
  );
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 12px 2px rgba(50, 0, 99, 0.18),
    0 0 24px 4px rgba(74, 144, 226, 0.18),
    0 8px 32px 0px rgba(44, 90, 160, 0.25),
    0 0 0 4px rgba(255, 255, 255, 0.08) inset;
  border: 1px solid rgba(255, 255, 255, 0.2);
  overflow: visible;
  z-index: 2;
}
.globe-sphere::before {
  content: "";
  position: absolute;
  top: 18%;
  left: 22%;
  width: 40%;
  height: 22%;
  border-radius: 50%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.7) 0%,
    rgba(255, 255, 255, 0.1) 100%
  );
  filter: blur(1px);
  opacity: 0.7;
  pointer-events: none;
  z-index: 3;
}
.globe-sphere::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  /* 经纬线SVG */
  background: url('data:image/svg+xml;utf8,<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg"><ellipse cx="16" cy="16" rx="15" ry="15" stroke="%23b3e0ff" stroke-width="0.5"/><ellipse cx="16" cy="16" rx="10" ry="15" stroke="%23b3e0ff" stroke-width="0.5"/><ellipse cx="16" cy="16" rx="15" ry="10" stroke="%23b3e0ff" stroke-width="0.5"/><ellipse cx="16" cy="16" rx="7" ry="15" stroke="%23b3e0ff" stroke-width="0.5"/><ellipse cx="16" cy="16" rx="15" ry="7" stroke="%23b3e0ff" stroke-width="0.5"/></svg>');
  background-size: cover;
  opacity: 0.35;
}
.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1.5px solid rgba(74, 144, 226, 0.45);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px #4a90e2, 0 0 2px 1px #fff inset;
  filter: blur(0.2px);
  transform: translate(-50%, -50%);
  animation: orbit-rotate 15s linear infinite;
  z-index: 1;
}
.orbit-1 {
  width: 38px;
  height: 38px;
  animation-duration: 15s;
}
.orbit-2 {
  width: 44px;
  height: 44px;
  animation-duration: 20s;
  animation-direction: reverse;
}
.orbit-3 {
  width: 48px;
  height: 48px;
  animation-duration: 25s;
}
.satellite {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #ff6b6b;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(255, 107, 107, 0.8);
  animation: satellite-rotate 10s linear infinite;
}
.satellite-1 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(19px);
  animation-duration: 8s;
}
.satellite-2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(22px);
  animation-duration: 12s;
  animation-direction: reverse;
}
.satellite-3 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateX(24px);
  animation-duration: 15s;
}
.data-points {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.data-point {
  position: absolute;
  width: 2px;
  height: 2px;
  background: #00ff88;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 255, 136, 0.8);
  animation: data-pulse 2s ease-in-out infinite;
}
.data-point:nth-child(1) {
  top: 20%;
  left: 30%;
  animation-delay: 0s;
}
.data-point:nth-child(2) {
  top: 40%;
  left: 70%;
  animation-delay: 0.3s;
}
.data-point:nth-child(3) {
  top: 60%;
  left: 20%;
  animation-delay: 0.6s;
}
.data-point:nth-child(4) {
  top: 80%;
  left: 60%;
  animation-delay: 0.9s;
}
.data-point:nth-child(5) {
  top: 30%;
  left: 80%;
  animation-delay: 1.2s;
}
.data-point:nth-child(6) {
  top: 70%;
  left: 40%;
  animation-delay: 1.5s;
}
.data-point:nth-child(7) {
  top: 50%;
  left: 10%;
  animation-delay: 1.8s;
}
.data-point:nth-child(8) {
  top: 90%;
  left: 50%;
  animation-delay: 2.1s;
}
@keyframes globe-rotate {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}
@keyframes orbit-rotate {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}
@keyframes satellite-rotate {
  from {
    transform: translate(-50%, -50%) translateX(19px) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) translateX(19px) rotate(360deg);
  }
}
@keyframes data-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}
.contact-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.contact-row .el-icon {
  color: #ffffff;
}
.contact-row span {
  color: #ffffff;
}

/* 仅添加logo排版样式，其他保持不变 */
.logo-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.header-logo {
  /* width: 200px; */
  height: 60px;
  object-fit: contain;
}
.logo-text {
  height: 80px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.logo-text h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.2;
}
.logo-text span {
  display: block;
  font-size: 15px;
  line-height: 1.2;
  opacity: 0.9;
}
:deep(.el-sub-menu__title:hover) {
  background-color: #fff !important;
}

@media (max-width: 768px) {
  .header-logo {
    /* width: 140px !important; */
    height: 50px;
  }

  .logo-text {
    /* height: 60px; */
    margin-left: 10px;
  }

  .logo-text h1 {
    font-size: 18px;
  }

  .logo-text span {
    font-size: 12px;
  }

  .nav {
    /* position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); */
    display: none;
  }

  .nav-open {
    transform: translateY(0);
  }

  .nav-list {
    flex-direction: column;
    padding: 20px;
    gap: 15px;
  }

  .nav-link {
    font-size: 14px;
  }

  .nav-panel {
    position: static;
    transform: none;
    margin-top: 10px;
    min-width: auto;
    width: 100%;
    padding: 16px;
  }

  .nav-panel::before {
    display: none;
  }

  .panel-content {
    flex-direction: column;
  }

  .panel-divider {
    width: 100%;
    height: 1px;
    margin: 10px 0;
  }

  .mobile-menu-btn {
    display: block;
  }

  .username {
    display: none;
  }

  /* 手机端3D地球样式调整 */
  .logo {
    gap: 6px;
  }

  .logo-globe {
    width: 40px;
    height: 40px;
  }

  .globe-header.globe-container {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
  }

  .globe-header .globe {
    width: 32px;
    height: 32px;
  }

  .globe-header .globe-sphere {
    width: 28px;
    height: 28px;
  }

  .globe-header .orbit.orbit-1 {
    width: 32px;
    height: 32px;
  }

  .globe-header .orbit.orbit-2 {
    width: 36px;
    height: 36px;
  }

  .globe-header .orbit.orbit-3 {
    width: 40px;
    height: 40px;
  }

  .globe-header .satellite {
    width: 2px;
    height: 2px;
  }

  .globe-header .data-point {
    width: 1px;
    height: 1px;
  }

  .logo h1 {
    font-size: 18px;
  }

  .logo span {
    font-size: 10px;
  }
}

/* 超小屏幕样式 */
@media (max-width: 480px) {
  .header-content {
    padding-left: 12px;
    padding-right: 12px;
  }
  .header-logo {
    /* width: 120px; */
    height: 40px;
  }

  .logo-text {
    height: 50px;
  }

  .logo-text h1 {
    font-size: 18px;
  }

  .logo-text span {
    font-size: 11px;
  }

  .logo {
    gap: 4px;
  }

  .logo-globe {
    width: 32px;
    height: 32px;
  }

  .globe-header.globe-container {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
  }

  .globe-header .globe {
    width: 24px;
    height: 24px;
  }

  .globe-header .globe-sphere {
    width: 20px;
    height: 20px;
  }

  .globe-header .orbit.orbit-1 {
    width: 24px;
    height: 24px;
  }

  .globe-header .orbit.orbit-2 {
    width: 28px;
    height: 28px;
  }

  .globe-header .orbit.orbit-3 {
    width: 32px;
    height: 32px;
  }

  .globe-header .satellite {
    width: 1px;
    height: 1px;
  }

  .globe-header .data-point {
    width: 1px;
    height: 1px;
  }

  .logo h1 {
    font-size: 16px;
  }

  .logo span {
    font-size: 8px;
  }
}

@media (min-width: 769px) and (max-width: 994px) {
  .header-logo {
    height: 50px;
  }
  .logo-text {
    max-width: 230px !important;
  }
  .logo-text h1 {
    font-size: 20px;
  }
  .nav {
    display: none;
  }
  .header-actions,
  .mobile-menu-btn {
    display: block;
  }
}

@media (min-width: 995px) and (max-width: 1150px) {
  .header-content {
    gap: 5px !important;
  }
  .header-logo {
    height: 45px;
  }
  .logo-text {
    max-width: 205px !important;
  }
  .logo-text h1 {
    font-size: 18px;
  }
  .nav-list {
    gap: 5px;
  }
  .nav-panel {
    padding: 12px;
  }
  .nav-link,
  .nav-link-cn {
    font-size: 14px !important;
  }
  .header-actions {
    display: none;
  }
}
@media (min-width: 1150px) and (max-width: 1200px) {
  .header .container {
    max-width: 100%;
    padding: 0 12px !important;
  }
  .logo-text {
    max-width: 230px !important;
  }
  .logo-text h1 {
    font-size: 20px;
  }
  .nav-link,
  .nav-link-cn {
    font-size: 15px !important;
  }
  .header-actions {
    display: none;
  }
}
</style>
